<!--
 * @Description: 精英PK排行榜
 * @Author: Li Yujie
 * @Date: 2021/1/22
 * @Last Modified by: Li Yujie
 * @Last Modified time: 2021/1/22
-->
<template>
    <div class="wrapper">
        <!--筛选表单-->
        <div class="filter-view">
            <div class="header-new-box">
                <p class="header-new-box-title">用户信息</p>
                <el-input
                    v-model="filterData.keyword"
                    placeholder="请输入用户昵称、注册手机号或用户编号"
                    suffix-icon="el-icon-search"
                    size="medium"
                    clearable
                    style="width: 300px"
                    @blur="getTableData(1)"
                    @keydown.enter.native="getTableData(1)"
                />
            </div>
            <div class="header-new-box">
                <p class="header-new-box-title">所属学校</p>
                <!--<el-input
                    v-model="filterData.school_name"
                    placeholder="请输入学校"
                    suffix-icon="el-icon-search"
                    size="medium"
                    clearable
                    @blur="getTableData(1)"
                    @keydown.enter.native="getTableData(1)"
                />-->
                <el-cascader
                    v-model="filterData.school_name"
                    placeholder="请选择学校"
                    :options="school_tree"
                    filterable
                    clearable
                    :show-all-levels="false"
                    size="medium"
                    change-on-select
                    expand-trigger="click"
                    @change="getTableData(1)"
                    @keyup.native.enter="getTableData(1)"
                    :props="{
                        label: 'name',
                        value: 'name',
                        children: 'children',
                    }"
                />
            </div>
            <div class="header-new-box">
                <p class="header-new-box-title">
                    精英等级
                </p>
                <el-select
                    v-model="filterData.agent_level"
                    clearable
                    filterable
                    placeholder="全部"
                    size="medium"
                    style="width: 152px"
                    @change="getTableData(1)"
                >
                    <el-option
                        label="全部"
                        value=""
                    />
                    <el-option
                        v-for="item in 6"
                        :key="item"
                        :label="`E${item - 1}`"
                        :value="item - 1"
                    />
                </el-select>
            </div>
            <div class="header-new-box">
                <el-button
                    type="primary"
                    size="small"
                    @click="getTableData(1)"
                >
                    查询
                </el-button>
            </div>
        </div>
        <!--/筛选表单-->

        <el-tabs
            v-model="filterData.type"
            @tab-click="getTableData(1)"
        >
            <el-tab-pane
                label="粉丝数榜单"
                name="1"
            />
            <el-tab-pane
                label="邀请代理数榜单"
                name="2"
            />
            <el-tab-pane
                label="订单数榜单"
                name="3"
            />
        </el-tabs>
        <div class="series-view">
            统计时间：{{ start_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm:ss') }} - {{ end_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm:ss') }}
            <el-select
                v-model="filterData.series_no"
                placeholder="全部"
                size="small"
                style="width: 152px; margin-left: 12px"
                @change="handleSeriesChange"
            >
                <el-option
                    v-for="item in seriesList"
                    :key="item.series_no"
                    :label="item.series_title"
                    :value="item.series_no"
                />
            </el-select>
        </div>
        <!-- table -->
        <el-table
            :data="tableData"
            height="100%"
            style="width: 100%;"
            ref="tempLateName"
        >
            <el-table-column
                label="排名"
                prop="rank_index"
                width="80"
                align="center"
            />
            <el-table-column
                prop="true_name"
                label="用户昵称"
                show-overflow-tooltip
                align="left"
                :formatter="emptyFormatter"
            />
            <el-table-column
                prop="phone"
                label="注册手机号"
                show-overflow-tooltip
                align="center"
                :formatter="emptyFormatter"
            />
            <el-table-column
                prop="student_no"
                label="用户编号"
                show-overflow-tooltip
                align="center"
                :formatter="emptyFormatter"
            />
            <el-table-column
                prop="invite_code"
                label="邀请码"
                show-overflow-tooltip
                align="center"
                :formatter="emptyFormatter"
            />
            <el-table-column
                prop="school_name"
                label="所属学校"
                show-overflow-tooltip
                align="center"
                :formatter="emptyFormatter"
            />
            <el-table-column
                label="精英等级"
                show-overflow-tooltip
                align="center"
                :formatter="emptyFormatter"
            >
                <template slot-scope="scope">
                    <div v-if="scope.row.agent_level !== -1">E{{ scope.row.agent_level }}</div>
                </template>
            </el-table-column>
            <el-table-column
                prop="invite_count"
                label="新增粉丝数"
                show-overflow-tooltip
                align="center"
            />
            <el-table-column
                prop="stuagent_count"
                label="邀请代理数"
                show-overflow-tooltip
                align="center"
            />
            <el-table-column
                prop="order_count"
                label="新增订单数"
                show-overflow-tooltip
                align="center"
            />
            <el-table-column
                prop="order_refund_count"
                label="退款订单"
                show-overflow-tooltip
                align="center"
            />
            <el-table-column
                prop="order_valid_count"
                label="榜单显示订单"
                show-overflow-tooltip
                align="center"
            />
        </el-table>
        <!-- /table -->

        <!-- /分页 -->
        <div class="pagination-wrapper clearfix">
            <el-pagination
                layout="total, prev, pager, next, jumper"
                background
                :current-page.sync="page.now_page"
                :total="page.total_count"
                :page-size="page.page_size"
                @current-change="getTableData"
            />
        </div>
    </div>
</template>

<script>
export default {
    name: "EliteRank",
    data() {
        return {
            filterData: {
                // 批次编号
                series_no: '',
                keyword: '',
                school_name: [],
                agent_level: '',
                type: '1'
            },
            seriesList: [],
            tableData: [],
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 20
            },
            start_time: '',
            end_time: '',
            school_tree: []
        };
    },
    filters: {},
    mounted() {
        this.getSeriesList();
        this.getSchoolTree();
    },
    methods: {

        /**
         * @description 获取省/市/学校三级联动
         */
        getSchoolTree () {
            this.$post('/student/local_info%5Cschool_tree',{},resp => {
                if (resp.code === 1) {
                    this.school_tree = resp.data.tree;
                }
            });
        },

        /**
         * 获取排期列表
         */
        getSeriesList() {
            this.$post('/student/pk%5Cget_series_list', {}, resp => {
                if (resp.code === 1) {
                    this.seriesList = [...resp.data.list];
                    this.filterData.series_no = this.seriesList[0].series_no;
                    this.start_time = this.seriesList[0].start_time;
                    this.end_time = this.seriesList[0].end_time;
                    this.getTableData();
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },
        /**
         * 获取表格数据
         * @param page
         */
        getTableData(page) {
            let params = {...this.filterData};
            let url = '';

            if(params.type === '1') url = '/student/pk%5Cget_invite_rank';
            if(params.type === '2') url = '/student/pk%5Cget_stuagent_rank';
            if(params.type === '3') url = '/student/pk%5Cget_order_rank';
            params.page_id = page || this.page.now_page;
            params.school_name = params.school_name.length > 0 ? params.school_name[2]: '';

            this.$post(url, params, resp => {
                if (resp.code === 1) {
                    this.tableData = resp.data.list;
                    this.page = resp.data.page;
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },
        /**
         * @description 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) return '--';
            return val;
        },

        /**
         * 批次变化
         */
        handleSeriesChange(val) {
            let data = this.seriesList.find(item => {
                return item.series_no === val;
            });

            this.start_time = data.start_time;
            this.end_time = data.end_time;
            this.getTableData(1);
        }
    }
};
</script>

<style scoped lang="less">
.wrapper {
    display: flex;
    height: calc(100% - 24px);
    width: calc(100% - 48px);
    flex-direction: column;
    position: relative;
    margin: 0 24px 24px;
    background: #fff;
    box-sizing: border-box;

    /*筛选*/
    .filter-view {
        margin-top: 6px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        .header-new-box {
            display: flex;
            align-items: center;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            white-space: nowrap;
            margin-right: 24px;
            margin-bottom: 24px;

            &-title {
                margin-right: 16px;
                white-space: nowrap;
            }
        }

        .input-with-select {
            width: 300px;
            margin-right: 32px;
        }

        /deep/ .input-with-select .el-input-group__prepend {
            background-color: #fff;
            width: 130px;
        }
    }

    /* 分页 */
    .pagination-wrapper {
        padding: 10px 32px;

        .el-pagination {
            float: right;
            padding: 0;
            background-color: transparent;
        }
    }

    /deep/ .el-tabs {
        height: 50px!important;
        .el-tabs__header {
            margin-bottom: 0!important;
        }
        .el-tabs__nav-wrap {
            height: 50px!important;
            padding-left: 0!important;

            .el-tabs__nav-scroll {
                .el-tabs__nav {
                    height: 50px!important;
                    line-height: 50px!important;
                }
            }
        }
    }
    .series-view {
        margin: 12px 0;
        text-align: right;
    }
}
</style>
